<template>
  <div class="box">
    <div class="big-container">
      <div class="input-box input-box-two">
        {{ $t('login.username') }}
        <input v-model="username">
      </div>

      <div class="input-box input-box-two">
        {{ $t('login.password') }}
        <input type="password"
          v-model="password"
          class="passwordinput"
        >
      </div>

      <div>
        <button
          class="normal-btn login-btn"
          @click="login"
        >
          {{ $t('login.login') }}
        </button>
      </div>

      <div>
        <button
          class="normal-btn sign-up-btn"
          @click="gotoregist"
        >
          {{ $t('login.signUp') }}
        </button>
      </div>
    </div>
    <!-- <div v-if="isShow">
      <Regist />
    </div> -->
    <!-- //* regist modal -->
    <modal name="my-first-modal" class="modal-container">

    <div class="container ">
      <div class="containerRowAlign">
        {{ $t('login.username') }}
        <input
          v-model="username"
          type="text"
        >
      </div>

      <div class="containerRowAlign">
        {{ $t('login.password') }}
        <input
          v-model="password"
          type="password"
          class="passwordinput"
        >
      </div>

      <div class="containerRowAlign">
        {{ $t('login.confirmPassword') }}
        <input
          v-model="confirmPassword"
          type="password"
          class="confirmPassword"
        >
      </div>

      <div>
        <button
          class="login"
          @click="regist"
        >
          {{ $t('login.signUp') }}
        </button>
      </div>
    </div>
    </modal>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
// import Regist from '@/views/login/components/Regist.vue';

export default {
  components: {
    // Regist,
  },
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: '',
      modal: this.$modal,
    };
  },

  created() {
    this.hideUserUnflod();
  },

  computed: {
    ...mapState({
      isShow: (state) => state.login.isShow,
    }),
  },
  methods: {
    ...mapActions([
      'userLogin',
      'showRegist',
      'hideUserUnflod',
      'userRegist',
    ]),
    regist() {
      this.userRegist({
        username: this.$data.username,
        password: this.$data.password,
        confirmPassword: this.$data.confirmPassword,
        modal: this.$modal,

      });
    },
    login() {
      this.userLogin({
        username: this.$data.username,
        password: this.$data.password,
      });
    },
    gotoregist() {
      this.$modal.show('my-first-modal');
      // this.showRegist();
      // console.log(this.isShow);
    },
  },

};
</script>

<style lang="scss" scoped>

.big-container{
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    width : 450px;
    height :300px;
    margin : 0 auto;
    margin-top : 160px;
}

input {
  width : 300px;
  height : 40px;
  margin-bottom : 10px;
  margin-left : 15px;
  font-size : 24px;
  text-align : center;
  text-indent : 1em;
  border : none;
  border-bottom : 2px solid #202020;
  outline : none;
}

.passwordinput{
  margin-left : 20px;
}

.normal-btn {
    height : 30px;
    padding : 5px 18px;
    font-size : 14px;
    color : #fff;
    background : #202020;
    border : 0;
    border-radius : 25px;
    outline : none;
}

.login-btn, .sign-up-btn {
        width : 300px;
        margin-top : 30px;
    }

.sign-up-btn {
    color : #202020;
    background-color : #fff;
}
// *注册弹框
.vm--modal{
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  background-color : #f7f7f7;
}

//* regist
.out-container{
  z-index : 998;
  width : 100%;
  height : 100%;
}
.container{
    position : absolute;
    // z-index : 999;
    padding : 20px;
    margin-right : -50%;
    overflow : auto;
    background : rgb(255, 255, 255);
    border : 1px solid rgb(204, 204, 204);
    border-radius : 4px;
    outline : none;
    transform : translate(-50%, -50%);
    inset : 50% auto auto 50%;
}

.container{
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;

}

input {
  width : 300px;
  height : 40px;
  margin-bottom : 10px;
  font-size : 24px;
  text-align : center;
  text-indent : 1em;
  border : none;
  border-bottom : 2px solid #202020;
  outline : none;
}
.login{
  width : 300px;
  height : 30px;
  margin-top : 30px;
  color : #fff;
  background : #202020;
  border : 0;
  border-radius : 25px;
  outline : none;
}

.modal-container{
  width : 1000px;
  height : 1000px;
}
</style>
